<template>
  <div class='container'>
    <el-card>
      <!-- 顶部输入搜索 新增部分 -->
      <!-- :label-position="right" -->
      <el-form size="small" :v-model="formInline">
        <el-row>
          <el-col :xs="10" :xl="6" :lg="6" :md="8" :sm="10" >
            <el-form-item label="标签名称" label-width="80px" prop="tags" >
              <el-input placeholder="请输入" v-model="formInline.tags"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="10" :xl="6" :lg="6" :md="8" :sm="10" >
            <el-form-item label="城市" label-width="80px" prop="province">
              <el-select  placeholder="请选择" v-model="formInline.province" style="width: 100%;" @visible-change="changeProvince">
                <el-option v-for="item in handelCity" :key="item" :label="item" :value="item"></el-option>
            </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="10" :xl="6" :lg="6" :md="8" :sm="10" >
            <el-form-item  label="地区" label-width="80px" prop="city" >
              <el-select placeholder="请选择" v-model="formInline.city" style="width: 100%;">
                <el-option v-for="item in handelArea" :key="item" :label="item" :value="item"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="10" :xl="6" :lg="6" :md="8" :sm="10" >
            <el-form-item label="企业简称" label-width="80px" prop="shortName" >
              <el-input placeholder="请输入" v-model="formInline.shortName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="10" :xl="6" :lg="6" :md="8" :sm="10" >
            <el-form-item label="状态" label-width="80px" prop="state" >
              <el-select placeholder="请选择" v-model="formInline.state" style="width: 100%;" @visible-change="getState" >
                <el-option v-for="item in handelState" :key="item.id" :value="item.id" :label="item.value"></el-option>
              </el-select>
          </el-form-item>
          </el-col>
          <el-col :xs="10" :xl="6" :lg="6" :md="8" :sm="10" class="box">
            <!-- <el-form-item label-width="40px"> -->
              <el-button size="small" @click="clear">清除</el-button>
              <el-button type="primary" size="small" @click="search">查询</el-button>
            <!-- </el-form-item> -->
          </el-col>
          <el-col :xs="10" :xl="6" :lg="6" :md="8" :sm="10" :push="6">
            <el-button type="success" style="float: right;" size="small" @click="handelAdd">
              <i class="el-icon-edit"></i>
              <span style="margin:'0 0 0 5px'">新增用户</span>
            </el-button>
          </el-col>
       </el-row>
       <!-- 数据记录部分 -->
       <el-alert
         :title="`共${total}条数据`"
         type="info"
         :closable="false"
         show-icon
         style="margin-bottom: 20px"
         >
       </el-alert>
       <!-- 中部显示数据表格部分 -->
        <el-table
          :data="tableData"
          style="width: 100%;"
          :header-cell-style="{
            background: '#FAFAFA',
            color: '#909399',
            borderBottom: '2px solid #e8e8e8',
          }"
          >
          <el-table-column prop="id" label="序号" width="100" align="center"></el-table-column>
          <el-table-column prop="number" label="企业编号" width="134" align="center"></el-table-column>
          <el-table-column prop="shortName" label="企业简称" width="134" align="center"></el-table-column>
          <el-table-column prop="tags" label="标签" width="134" align="center"></el-table-column>
          <el-table-column prop="creatorID" label="创建者" width="134" align="center"></el-table-column>
          <el-table-column prop="addDate" label="创建日期" width="180" align="center">
            <template slot-scope="{ row }">
          {{ row.addDate | parseTimeByString }}
        </template>
          </el-table-column>
          <el-table-column prop="company" label="备注" width="134" align="center"></el-table-column>
          <el-table-column prop="state" label="状态" align="center">
            <template #default="{ row }">
                <span>{{ row.state ? '启用' : '禁用'}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="zip" label="操作" width="180" align="center">
            <!-- <el-row> -->
            <template #default="{ row }">
              <el-button class="btnEdit" type="primary" icon="el-icon-edit" circle @click="handelEdit(row.id)"></el-button>
              <el-button :class="row.state ? 'btnSuccess' : 'btnWarning'" :title="row.state ? '启用' : '禁用'" :type="row.state ? 'success' : 'warning'" :icon="row.state ? 'el-icon-check' : 'el-icon-close'" circle @click="handelSwitch(row.id, row.state)"></el-button>
              <el-button class="btnDel" type="danger" icon="el-icon-delete" circle @click="handelRemove(row.id)"></el-button>
            </template>
            <!-- </el-row> -->
          </el-table-column>
        </el-table>
       <!-- 底部分页选择部分 -->
        <div class="pagination">
          <div class="pages">
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page.sync="params.page"
              :page-sizes="[6, 15, 30, 50]"
              :page-size="params.size"
              layout="prev, pager, next,sizes,jumper"
              :total="total">
            </el-pagination>
          </div>
       </div>
     </el-form>
    </el-card>
    <addCompanys ref="addCompanys" :showDialog.sync="showDialog" @list="list" :handelCity='handelCity' :handelArea="handelArea"></addCompanys>
  </div>
</template>

<script>
import { list, remove, disabled1 } from '@/api/hmmm/companys'
import addCompanys from '@/module-hmmm/components/companys-add'
import { provinces, citys } from '@/api/hmmm/citys'
import baseApi from '@/api/base/baseApi.js' // 枚举
export default {
  components: {
    addCompanys
  },
  data () {
    return {
      formInline: {
        tags: null,
        province: null,
        city: null,
        shortName: null,
        state: null
      },
      pageForm: {},
      params: {
        page: 1,
        pagesize: 6
      },
      total: 0,
      tableData: [],
      showDialog: false,
      handelCity: [],
      handelArea: [],
      handelState: []
    }
  },
  created () {
    this.list()
    this.provinces()
  },
  methods: {
    async list (formInline) {
      // 调用接口传递参数渲染数据页面 可以解构数据 { data: { items } }
      const res = await list({ ...formInline, ...this.params })
      // console.log(res)
      this.tableData = res.data.items
      this.total = res.data.counts
      // this.formInline = res.data.items
    },
    // 没页条数改变时
    handleSizeChange (size) {
      this.params.pagesize = size
      this.params.page = 1
      this.list()
    },
    async handleCurrentChange (page) {
      this.params.page = page
      // 当前页面改变时(.sync) 再次list调用接口获取数据
      const res = await list({ ...this.pageForm, ...this.params })
      // console.log(res)
      this.tableData = res.data.items
      this.total = res.data.counts
      // this.formInline = res.data.items
    },
    // 城市
    async provinces () {
      const data = await provinces()
      this.handelCity = data
    },
    // // 地区
    // async citys () {
    //   const data = await citys(this.formInline.province)
    //   // console.log(data)
    //   this.handelArea = data
    // },
    // 下拉框出现/隐藏时触发
    async changeProvince () {
      // 地区
      this.handelArea = await citys(this.formInline.province)
      if (this.handelArea.length) {
        this.formInline.city = this.handelArea[0]
      }
    },
    // 清除
    clear () {
      this.formInline = {
        tags: null,
        province: null,
        city: null,
        shortName: null,
        state: null
      }
      this.pageForm = {}
      this.list()
    },
    // 搜索
    async search () {
      // await this.list(this.formInline)
      this.pageForm = this.formInline
      this.params.page = 1
      this.params.pagesize = 6
      const res = await list({ ...this.formInline, page: 1, pagesize: 6 })
      // console.log(res)
      this.tableData = res.data.items
      this.total = res.data.counts
    },
    // 新增数据
    async handelAdd () {
      // 开启弹窗
      this.showDialog = true
    },
    // 修改数据
    async handelEdit (id) {
      // await update({ id })
      this.showDialog = true
      this.$refs.addCompanys.handelEdit(id)
    },
    async getState () { // 状态枚举
      this.handelState = await baseApi.statu
    },
    // 启用 关闭按钮
    async handelSwitch (id, state) {
      // console.log(id)
      console.log(!state) // true 所以判断时要转换 +
      try {
        if (state) {
          await this.$confirm('已成功启用, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
          await disabled1({ id, state: +!state })
          this.$message.success('禁用成功！')
        } else {
          await this.$confirm('已成功禁用, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
          await disabled1({ id, state: +!state })
          this.$message.success('启用成功！')
        }
        // 重新渲染数据
        this.list()
      } catch (error) {
        console.log(error)
        if (error === 'cancel') {
          this.$message.info('取消操作！')
        }
      }
    },

    // 删除按钮
    async handelRemove (id) {
      // 提示是否确认删除信息
      try {
        await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        // 调用删除数据接口
        await remove({ id })
        // 解决当前页删除最后一条数据时显示没有数据的bug
        const totalPage = Math.ceil((this.total - 1) / this.params.pagesize)
        this.params.page = this.params.page > totalPage ? totalPage : this.params.page
        this.params.page = this.params.page < 1 ? 1 : this.params.page
        // 数据回填
        this.list()
        // 提示信息
        this.$message.success('删除成功!')
      } catch (error) {
        console.log(error)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.container {
 padding: 10px;
}
.box {
  padding: 0 0 0 40px;
}
.pagination {
  margin-top: 10px;
}
.pages {
  margin-top: 20px;
  text-align: right;
}
// 修改按钮颜色变化
.btnEdit {
  background-color: rgb(236, 245, 255);
  color: blue;
}
// 修改按钮颜色变化
.btnEdit:hover {
  background-color:rgb( 64, 158, 255);
  color: #fff;
}
// 企业按钮颜色变化
.btnSuccess {
  background-color: rgb(240, 249, 235);
  color: rgb(129, 205, 143);
}
// 企业按钮颜色变化
.btnSuccess:hover {
  background-color: rgb(103, 194, 58);
  color: #fff;
}
// 禁用按钮颜色变化
.btnWarning {
  background-color: rgb(253, 246, 236);
  color: rgb(230, 162, 60);
}
// 禁用按钮颜色变化
.btnWarning:hover {
  background-color: rgb(230, 162, 60);
  color: #fff;
}
// 删除按钮颜色变化
.btnDel {
  background-color: rgb(254, 240, 240);
  color: rgb(245, 108, 108);
}
// 删除按钮颜色变化
.btnDel:hover {
  background-color: rgb(245, 108, 108);
  color: #fff;
}

</style>
